<template>
<div>
  <div v-if="mainConState">
  <Header></Header>
    <!--列表条件搜索-->
        <div class="w1200 bc mt20 pl20 pr20 pt30 bg100">
          <table class="fm-yahei">
            <col  class="w120" />
            <col  class=" w80"/>
            <col class="w880"/>
            <!--地区-->
            <tr class="pr">
              <td class="pb30"><span class="c30 f14 lh24 ">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</span></td>
              <td class="pb30" ><a class="inline-block pl10 pr10 h24 f12 lh24 curbg_grn hoverbg_grn" >全部</a></td>
              <td class="pb30"  >
                  <div class="fl pr w130  h24  mr20 f12 lh24 c40 t1 b87  pointer selBox "  >
                <div class="sel">浙江省 </div>
                <!-- <ul class="optionBox b87 f12 lh24 w130  bg100">
                  <li class="bb87 ">浙江省</li>
                  <li class="bb87 ">黑龙江</li>
                </ul> -->
              </div>
              <div class="fl pr w130  h24  mr20 f12 lh24 c40 t1 b87  pointer selBox "  >
                <div class="sel">杭州市 </div>
                <!-- <ul class="optionBox b87 f12 lh24 w130  bg100 ">
                  <li class="bb87 ">浙江省</li>
                  <li class="bb87 ">黑龙江</li>
                  <li class="bb87 ">内蒙古</li>
                  <li class="bb87 ">新疆</li>
                  <li class="bb87 ">西藏</li>
                  <li class="bb87 ">上海</li>
                  <li class="">江苏省</li>
                  <li class="bb87 ">浙江省</li>
                  <li class="bb87 ">黑龙江</li>
                  <li class="bb87 ">内蒙古</li>
                  <li class="bb87 ">新疆</li>
                  <li class="bb87 ">西藏</li>
                  <li class="bb87 ">上海</li>
                  <li class="">江苏省</li>
                  <li class="bb87 ">浙江省</li>
                  <li class="bb87 ">黑龙江</li>
                  <li class="bb87 ">内蒙古</li>
                  <li class="bb87 ">新疆</li>
                  <li class="bb87 ">西藏</li>
                  <li class="bb87 ">上海</li>
                  <li class="">江苏省</li>
                  <li class="bb87 ">浙江省</li>
                  <li class="bb87 ">黑龙江</li>
                  <li class="bb87 ">内蒙古</li>
                  <li class="bb87 ">新疆</li>
                  <li class="bb87 ">西藏</li>
                  <li class="bb87 ">上海</li>
                  <li class="">江苏省</li>
                </ul> -->
              </div>
              <div class="fl pr w130  h24  f12 lh24 c40 t1 b87  pointer selBox "  >
                <div class="sel">西湖区 </div>
                <!-- <ul class="optionBox b87 f12 lh24 w130  bg100 ">
                  <li class="bb87 ">浙江省</li>
                  <li class="bb87 ">黑龙江</li>
                  <li class="bb87 ">内蒙古</li>
                  <li class="bb87 ">新疆</li>
                  <li class="bb87 ">西藏</li>
                  <li class="bb87 ">上海</li>
                  <li class="">江苏省</li>
                </ul> -->
              </div>
              </td>
            </tr>
            <!--车型-->
            <tr class="pr vt">
              <td class="pb30"><span class="c30 f14 lh24 ">车&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</span></td>
              <td class="pb30" ><a class="inline-block pl10 pr10 h24 f12 lh24 curbg_grn hoverbg_grn" >全部</a></td>
              <td class="pb20" style="position:relative"  >
                               <span @click="loadMore" class="loadMore">{{isSee?'更多':'折叠'}}</span>
                  <ul class="clearfix" :class="{toggle:isSee}">
                    <li v-for="list in listA.data" class="fl mb10 mr20 ">
                      <a class="fl pl10 pr10 h24 f12 lh24 c40  hoverbg_grn" >{{list.typeName}}</a>
                    </li>
                  </ul>

              </td>
            </tr>
            <!--兴趣点-->
            <tr class="pr vt">
              <td class="pb30"><span class="c30 f14 lh24 ">兴&nbsp;&nbsp;趣&nbsp;&nbsp;点</span></td>
              <td class="pb30" ><a class="inline-block pl10 pr10 h24 f12 lh24 curbg_grn hoverbg_grn" >全部</a></td>
              <td class="pb20"  >
                  <ul class="clearfix ">
                    <li v-for="list in listB.data" class="fl mb10 mr20 ">
                      <a class="fl pl10 pr10 h24 f12 lh24 c40  hoverbg_grn" >{{list.typeName}}</a>
                    </li>
                  </ul>
              </td>
            </tr>

          </table>
        </div>
        <!--列表条件搜索结束-->
        <!--综合排序-->
        <div class="w1200 bc mt20 pl20 pr20 pt10 pb10 bg100 h45  clearfix">
          <a  class="fl h36 fm_songti f14 c20 lh36 vm mr40">综合排序</a>
          <a style="position: relative;top: -2px;"  class="fl h36 fm_songti f14 c20 lh36 vm mr40"><span class="vm">人数由高到低 </span><img class=" vm" src="../../../static/images/sort-arrow.png"/></a>
          <a style="position: relative;top: -2px;"  class="fl h36 fm_songti f14 c20 lh36 vm mr40"><span class="vm">创建时间 </span><img class=" vm" src="../../../static/images/sort-arrow.png"/></a>
          <!--<a  class="fl h30 fm_songti f14 c20 lh30">最热<img src="../../../static/images/hot-btn.png"/></a>-->
          <a @click="goEdit" class="fr h36 fm_songti f12 c50 lh36 b87 bg97 pl10 pr10 editBtnBg hoverborder_grn "><i class="inline-block w20 h10 mr5"></i>创建圈子</a>
          <a @click="searchKey(keyword)" class="fr w60 h36 bg_grn_119c5b mr20 greenBgSearch pointer" ></a>
          <input v-model="keyword" @keyup.enter="searchKey(keyword)" class="fr w350 h36 b87 bgfff pl20 pr20  f12 c40 lh36" type="text" placeholder="请输入关键字搜索" />
        </div>
        <!--综合排序结束-->
        <!--列表主体 bottomBox-->
        <div class="w1200 bc mt20 bottomBox clearfix">
          <!--左边 圈子list-->
          <div class="bottomLeft w1010 fl ">
            <!--圈子item开始-->
            <div v-for="list in lists" class="w1010 p20 bg100 clearfix hoverborder_orgred pointer circleLi" >
              <div class="pr w308 fl">
                <img :src="list.imgUrl+'?x-oss-process=image/resize,m_fill,h_230,w_350'" width="308" height="202"/>
                <!--<div class="pl8 pr8 h20 bg0-alpha40 br2 c98 f12 fm-songti tc lh20 abs-left-top mt10 ml10 ">进行中</div>-->
              </div>
              <dl class="fr w614 lh20 f12 c40">
                <dt class="clearfix">
                  <b class="fl f20 c20 fm-yahei fn">{{list.groupName}}</b>
                  <span class="locationBg fr c60 fm-songti "><i class="pl15"></i>浙江&nbsp;.&nbsp;杭州</span>
                </dt>
                <!--兴趣点-->
                <dd class="mt25">
                  <ul class="fm-songti lh20 h22 overflow">
                    <li class="clearfix">
                      <span class="fl w60 c7 letter1 lh22">兴趣点:</span>
                      <div class="fl w552">
                        <span class="fl h20 c50 pl10 pr10 mr10 mb10 b90">台球</span>
                        <span class="fl h20 c50 pl10 pr10 mr10 mb10 b90">台球</span>
                      </div>

                    </li>
                  </ul>
                </dd>
                <!--车型-->
                <dd class="mt10">
                  <ul class="fm-songti lh20 h22 overflow">
                    <li class="clearfix">
                      <span class="fl w60 c7 letter1 lh22">车型:</span>
                      <div class="fl w552">
                        <span class="fl h20 c50 pl10 pr10 mr10 mb10 b90">台球</span>
                        <span class="fl h20 c50 pl10 pr10 mr10 mb10 b90">台球</span>
                        <span class="fl h20 c50 pl10 pr10 mr10 mb10 b90">台球</span>
                        <span class="fl h20 c50 pl10 pr10 mr10 mb10 b90">台球</span>
                      </div>

                    </li>
                  </ul>
                </dd>
                <dd class="mt20 pr">
                  <p class="letter1 c60 h40 overflow">{{list.introduce}}<img class="ml5 vm" src="../../../static/images/arrow-right-doble.png" width="9" height="10"/></p>
                </dd>
                <dd class="h24 lh24 f12 mt25 clearfix">
                  <div class="fl mr50" >
                    <span class="c40 fl mr15">创建者：</span>
                    <a  class="fl">
                      <img class="fl mr5 mt5" src="../../../static/images/user-img-30.png" width="16" height="16"/>
                      <span class="fl c_org_ff991d">在路上的阿毛</span>
                    </a>
                  </div>
                  <span class="fl c60 ">已加入<i class="fb ml5 mr5 c_orgRed_ff481d">{{list.userCount}}</i>人</span>
                  <a  class=" fr w60 h24 br2 bg_grn_119c5b tc lh24 c100 letter1 hoverbg_orgred">加入</a>
                </dd>
              </dl>
            </div><!--圈子item结束-->

            <!--页码-->
             <div class="block">
                          <el-pagination
                          @current-change="handleCurrentChange"
                          :current-page.sync="currentPage"
                          :page-size="pageSize"
                          layout="total, prev, pager, next, jumper"
                          :total="total">
                          </el-pagination>
                      </div>
          </div><!--左边 圈子列表bottomLeft结束-->
          <!--右边热门圈子-->
          <div class="bottomRight fr w190 ">
              <!--热门圈子-->
              <div class="acts fm_songti f12 mb10 bg100 ">
                <h1 class="w h28 lh28 c100 fb tl ti10 bg_org_e0613a">热门圈子</h1>
                <ul class=" pr10 pl10 pb40 f12 pointer">
                  <li class="clearfix mt15 bb87 pb10 ">
                    <img class="fl w40" src="../../../static/images/user-img.png" width="40" height="40"/>
                    <dl class="fr w120 c40 hoverfont_unl">
                      <dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
                      <dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
                    </dl>
                  </li>
                </ul>
              </div>	<!--热门圈子结束-->
              <!--附近圈子圈子-->
              <div class="acts fm_songti f12 bg100">
                <h1 class="w h28 lh28 c100 fb tl ti10 bg_pink_e15671 ">附近圈子</h1>
                <ul class=" pr10 pl10 pb40 f12 pointer">
                  <li class="clearfix mt15 bb87 pb10 ">
                    <img class="fl w40" src="../../../static/images/user-img.png" width="40" height="40"/>
                    <dl class="fr w120 c40 hoverfont_unl">
                      <dt class="clearfix"><b class="c40">杭州牧马人</b><span class="c60 fr">2000人</span></dt>
                      <dd class="mt10"><p class="c40 lh150">兴趣点：牧马人、途胜</p></dd>
                    </dl>
                  </li>
                </ul>
              </div>	<!--热门圈子结束-->
          </div><!--bottomRight结束-->
        </div>
        <!--列表主体 bottomBox结束-->
    <Footer></Footer>
  </div>
  <Loading v-show="loadState"></Loading>
</div>
</template>
<script>
import Header from '../../components/header'
import Footer from '../../components/footer'
import axios from '../../../config/http'
import Loading from '../../components/loading';
export default {
  components: {
    Header,
    Footer,
    Loading
  },
  data () {
    return {
        listA:[],
        listB:[],
        isSee:true,
        text:'',
        // 重置列表、
        lists:[],
        keyword:'',
		    total:0,
        pageSize:8,
		    currentPage:1,
        loadState:true,
        mainConState:false
    }
  },
  mounted(){
      this.getListOption()
      this.getListDetail()
  },
  methods: {
	  // 跳转创建圈子
	  goEdit(){
		this.$router.push({path:'/edit'})
	  },
    // 页面加载调用函数
        // 类型检索条件
        getListOption(){
            axios({
            	url:'/Group/GetGroupType',
            	method:"post",
            	headers:{
            		client:"pc"
            	}
            }).then(res => {
                let items = res.data.data
                for(let list of items){
                    if(list.typeName === "车型"){
                        this.listA = list
                    }else if(list.typeName === "兴趣点"){
                        this.listB = list
                    }
                }
                console.log(this.listA,this.listB)
            })
        },
        // 获取圈子列表详情
        getListDetail(){
             axios({
             	url:"/Group/GetList",
             	method:"post",
             	headers:{
             		client:"pc"
             	},
             	data:{
	            "type": 0,
	            "categoryID": 0,
	            "userID": 0,
	            "pageIndex":this.currentPage - 1,
	            "pageSize": this.pageSize,
	            "typeID": "",
	            "cityID": 0,
	            "provinceID": "",
	            "keyword": this.keyword,
	            "keywordsRegionID": "",
	            "keywordsCityID": "",
	            "keywordsProvinceID": "",
	            "keywordsUserID": "",
	            "clientType":"pc"
	            }
             }).then(res => {
                this.lists = res.data.data
                this.total = res.data.total
                this.mainConState = true
                this.loadState = false
            })
        },
    // 查看更多车型
    loadMore(){
        this.isSee = !this.isSee
    },
     // Enter到输入页码页面
    handleCurrentChange(val) {
		 window.scrollTo(0,0)
        this.currentPage = val
        this.getListDetail()
    // console.log(`当前页: ${val}`)
    },
    // 搜索对应圈子信息
	  searchKey(){
		//   console.log(this.keyword,this.currentPage-1,this.pageSize)
		this.currentPage = 1
		this.getListDetail()
	  }
  }
}
</script>
<style lang="less" scoped>
.loadMore{
    display: inline-block;
    position: absolute;
    top:0; right:-40px;
    width: 60px;
    font-size:14px;
    float:right;
    color:rgb(17, 156, 91);
    padding:3px 10px;
    background: url(../../../static/images/grn_arrow_down.png) no-repeat;
    background-position: 90% 50%;
    background-size: 18%;
    cursor: pointer;
    text-align: left;
    // box-sizing: border-box;
    border:1px solid white;
}
.loadMore:hover{
    border:1px solid rgb(17, 156, 91);
}
.toggle{
    height:100px;
    overflow: hidden;
}
.el-pagination{
    margin:20px auto;
}
dl p{
	text-align: left;
}
.block{
	text-align: right
}
.p20{
    border:1px solid #fff;
}
.p20:hover{
    border:1px solid #f16113;
}
.w1010{
  width:1000px;
}
.circleLi{
  margin-bottom:10px;
}
</style>
